// 卡片详情页脚本
new Vue({
  el: '#app',
  data() {
    return {
      // 卡片数据
      cardData: {
        uuid: '1',
        title: '完成前端UI设计',
        content: '<p>使用Element UI组件库完成所有页面的设计和实现。</p><p>主要任务包括：</p><ul><li>首页设计</li><li>卡片详情页设计</li><li>编辑页面设计</li><li>登录注册页面设计</li></ul><p>需要确保UI美观、简洁、易用，并且能够适配不同设备。</p>',
        createTime: '2023-04-01 10:00:00',
        updateTime: '2023-04-02 15:30:00',
        endTime: '2023-04-10 18:00:00',
        status: 'inProgress',
        priority: 'high',
        ownerUuid: 'user1',
        creator: '张三',
        tags: ['ui', 'design'],
        views: 25,
        collections: 3,
        downloads: 5,
        likes: 10
      },
      
      // 编辑模式
      editMode: false,
      
      // 新评论
      newComment: '',
      
      // 评论列表
      comments: [
        {
          uuid: 'comment1',
          userName: '李四',
          userAvatar: '',
          content: '设计非常不错，建议在移动端优化一下按钮位置。',
          createTime: '2023-04-02 14:20:00'
        },
        {
          uuid: 'comment2',
          userName: '王五',
          userAvatar: '',
          content: '已经完成了首页部分，其他页面正在设计中。',
          createTime: '2023-04-02 16:35:00'
        }
      ],
      
      // 历史记录
      cardHistory: [
        {
          time: '2023-04-02 15:30:00',
          type: 'primary',
          content: '张三 更新了卡片内容'
        },
        {
          time: '2023-04-01 14:20:00',
          type: 'info',
          content: '李四 将状态修改为 进行中'
        },
        {
          time: '2023-04-01 10:00:00',
          type: 'success',
          content: '张三 创建了卡片'
        }
      ],
      
      // 状态选项
      statusOptions: [
        { value: 'completed', label: '已完成' },
        { value: 'inProgress', label: '进行中' },
        { value: 'todo', label: '待办' }
      ],
      
      // 优先级选项
      priorityOptions: [
        { value: 'high', label: '高级' },
        { value: 'medium', label: '中级' },
        { value: 'low', label: '低级' }
      ],
      
      // 用户选项
      userOptions: [
        { value: 'user1', label: '张三' },
        { value: 'user2', label: '李四' },
        { value: 'user3', label: '王五' }
      ],
      
      // 标签选项
      tagOptions: [
        { value: 'ui', label: 'UI' },
        { value: 'design', label: '设计' },
        { value: 'frontend', label: '前端' },
        { value: 'backend', label: '后端' },
        { value: 'database', label: '数据库' }
      ]
    };
  },
  created() {
    // 获取卡片详情数据
    this.fetchCardData();
  },
  methods: {
    // 获取卡片数据
    fetchCardData() {
      // 模拟从后端获取数据
      // 实际应用中应该调用后端API
      console.log('获取卡片数据:', this.cardData.uuid);
    },
    
    // 返回上一页
    goBack() {
      // 实际应用中使用路由或history返回
      console.log('返回上一页');
    },
    
    // 切换编辑模式
    toggleEditMode() {
      this.editMode = !this.editMode;
      if (!this.editMode) {
        this.saveCardInfo();
      }
    },
    
    // 保存卡片信息
    saveCardInfo() {
      // 模拟保存数据到后端
      // 实际应用中应该调用后端API
      console.log('保存卡片信息:', this.cardData);
      
      // 更新修改时间
      this.cardData.updateTime = new Date().toLocaleString('zh-CN');
      
      // 添加历史记录
      this.cardHistory.unshift({
        time: this.cardData.updateTime,
        type: 'primary',
        content: '当前用户 更新了卡片信息'
      });
    },
    
    // 删除卡片
    deleteCard() {
      this.$confirm('确认删除该卡片?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 模拟删除卡片
        // 实际应用中应该调用后端API
        console.log('删除卡片:', this.cardData.uuid);
        
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        
        // 返回首页
        this.goBack();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    
    // 编辑卡片内容
    editCardContent() {
      // 跳转到编辑内容页面
      console.log('编辑卡片内容:', this.cardData.uuid);
    },
    
    // 提交评论
    submitComment() {
      if (!this.newComment.trim()) {
        this.$message.warning('评论内容不能为空');
        return;
      }
      
      // 创建新评论
      const comment = {
        uuid: 'comment' + (this.comments.length + 1),
        userName: '当前用户',
        userAvatar: '',
        content: this.newComment,
        createTime: new Date().toLocaleString('zh-CN')
      };
      
      // 添加到评论列表
      this.comments.unshift(comment);
      
      // 清空输入框
      this.newComment = '';
      
      // 模拟保存到后端
      // 实际应用中应该调用后端API
      console.log('提交评论:', comment);
    },
    
    // 收藏卡片
    collectCard() {
      // 模拟收藏卡片
      // 实际应用中应该调用后端API
      this.cardData.collections++;
      
      this.$message({
        type: 'success',
        message: '收藏成功!'
      });
    },
    
    // 下载卡片
    downloadCard() {
      // 模拟下载卡片
      // 实际应用中应该调用后端API
      this.cardData.downloads++;
      
      this.$message({
        type: 'success',
        message: '下载成功!'
      });
    },
    
    // 点赞卡片
    likeCard() {
      // 模拟点赞卡片
      // 实际应用中应该调用后端API
      this.cardData.likes++;
      
      this.$message({
        type: 'success',
        message: '点赞成功!'
      });
    }
  }
}); 